import React, {Fragment, useMemo, useRef} from "react";
import {Badge, Button, Popconfirm} from "antd";
import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';

import SkProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { helper } from "vendor/utils/T";
import { permission, EnumAuthKey, AuthCan } from "@/service/permission";
import { useThemeToken } from "@/constants";
import { EnumStatus } from '../../../constants'

import { EnumMenuType } from './constants';
import { getDataAction,  filterItems } from './proTableDriver';
import { CreateOrEditBtn } from './btn';
import { RespDataType, deleteMenu } from '../api';

interface ListProps {}

const List: React.FC<ListProps> = () => {
    const { themeToken } = useThemeToken();
    const proTableRef = useRef<IProTableRef>();
    const columns = useMemo(() => getColumns(proTableRef), [proTableRef]);

    return (
        <SkProTable
            ref={proTableRef}
            dataAction={getDataAction(proTableRef)}
            rowKey={"menuId"}
            theme={themeToken.proTableToken}
            headerProps={{
                operatorProps: {
                    btnList: [{
                        authKey: EnumAuthKey.menu.addButton,
                        ExtendComponent: () => <CreateOrEditBtn type="primary" size="middle" optType="add" icon={<PlusOutlined />} fetchList={() => proTableRef.current.doFetchList()}>
                            添加
                        </CreateOrEditBtn>
                    }].filter((item) => permission.can(item.authKey)),
                },
                filterProps:{
                    maxWidth: "45%",
                    filterItems
                }
            }}
            contentProps={{
                isShowRowSelection: false,
                tableProps: {
                    columns,
                }
            }}
            footerProps={{isShow: false}}
            onError={(msg) => console.error(msg)}
        />
    )
}

export default List;

const getColumns = (proTableRef: React.MutableRefObject<IProTableRef>) => {
    const statusToInfo = helper.convertArrayToObj(EnumStatus);
    const menuTypeToInfo = helper.convertArrayToObj(EnumMenuType);

    const columns: TableType.ColumnsType<RespDataType.MenuItem> = [
        {
            title: '组织名称',
            dataIndex: 'menuName',
            width: '35%',
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: '10%',
            render: (value) => {
                const {label, color} = statusToInfo[value];
                return <span>
                    <Badge color={color} />
                    <span style={{color}}>{label}</span>
                </span>
            }
        },
        {
            title: '权限标识',
            dataIndex: 'perms',
            width: '10%',
            key: 'lng',
        },
        {
            title: '类型',
            dataIndex: 'menuType',
            width: '5%',
            render: (text: string) => menuTypeToInfo[text].label
        },
        {
            title: "操作",
            width: '30%',
            render: (value, record) => <Fragment>
                <AuthCan authKey={EnumAuthKey.menu.addButton}>
                    <CreateOrEditBtn menuId={record.menuId} size="small" optType="add" icon={<PlusOutlined />} style={{marginRight: 5}} fetchList={() => proTableRef.current.doFetchList()}>添加</CreateOrEditBtn>
                </AuthCan>
                <AuthCan authKey={EnumAuthKey.menu.editButton}>
                    <CreateOrEditBtn menuId={record.menuId} size="small" optType="edit" editData={record} icon={<EditOutlined />} style={{marginRight: 5}} fetchList={() => proTableRef.current.doFetchList()}>编辑</CreateOrEditBtn>
                </AuthCan>

                <AuthCan authKey={EnumAuthKey.menu.removeButton}>
                    <Popconfirm
                        title="确定删除?"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => new Promise((resolve, reject) => deleteMenu([record.menuId]).then(() => {
                            proTableRef.current.doFetchList();
                            resolve(true)
                        }).catch((e) => reject(e)))}>
                        <Button
                            danger
                            size="small"
                            icon={ <DeleteOutlined /> }
                            style={{marginRight: 5}}
                        >
                            删除
                        </Button>
                    </Popconfirm>
                </AuthCan>
            </Fragment>
        }
    ];

    return columns;
}